import React, { memo, useState, useEffect, useRef, useCallback } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { Route, Link, useHistory } from "react-router-dom";
import { BulletinWrapper } from "./style";
import { getBulletin } from "@/service/index";
import { BellOutlined } from "@ant-design/icons";
import { Collapse } from "antd";

const { Panel } = Collapse;
export default memo(function Bulletin() {
  const [list, setlist] = useState([]);
  useEffect(() => {
    getBulletin().then((res) => {
      console.log(res);
      setlist(res.data.dataList);
    });
  }, []);

  return (
    <BulletinWrapper>
      <div className="title">
        <BellOutlined />
        最新公告
      </div>
      <div className="content">
        {list.map((item) => {
          return (
            <Link
              className="item"
              key={item.id}
              to={`/bulletin?id=${item.id}`}
              target="_blank"
            >
              <div className="title">{item.title}</div>
              <div className="time">{item.dateAdd}</div>
            </Link>
          );
        })}
      </div>
    </BulletinWrapper>
  );
});
